<template>
  <view class="content">
    <view>aaaaa</view>
    <testVue />
    <search />

    <view style="padding: 20px">
      <u-button type="primary" text="确定"></u-button>
      <u-button type="primary" :plain="true" text="镂空"></u-button>
      <u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
      <u-button type="primary" :disabled="true" text="禁用"></u-button>
      <u-button type="primary" loading loadingText="加载中"></u-button>
      <u-button type="primary" icon="map" text="图标按钮"></u-button>
      <u-button type="primary" shape="circle" text="按钮形状"></u-button>
      <u-button
        text="渐变色按钮"
        color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
      ></u-button>
      <u-button type="primary" size="small" text="大小尺寸"></u-button>
    </view>

    <view>
      <u-picker :show="show" :columns="columns"></u-picker>
      <u-button @click="show = true">打开</u-button>
    </view>
  </view>
</template>

<script>
import testVue from '../../components/test.vue';

export default {
  components: { testVue },
  data() {
    return {
      title: 'Hello',
      show: false,
      columns: [['中国', '美国', '日本']],
    };
  },
  async onLoad() {
    // 微信小程序原生的， 不支持promise ---- 享+小程序 --> WECHAT-HTTP 支持promsie 支持 拦截器
    // 我们这个项目是 uni-app的，打包为15个平台。 打包为抖音小程序
    // 在开发一个多个平台的项目的时候，不要使用wx.。 在开发uni-app小程序的时候， 所有 wx. 都换成 uni.
    // wx.request({
    // uni.request({
    //   url: 'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312',
    //   success(res) {
    //     console.log(res);
    //   },
    // });

    // uni-app 对原生小程序的 发请求wx.request 做了一个promise的封装，如果不传递success等回调函数，那么就返回一个proimise
    // uni
    //   .request({
    //     url: 'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312',
    //   })
    //   .then((res) => {
    //     console.log(1111, res);
    //   });

    // const res = await uni.request({
    //   url: 'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312',
    // });
    console.log(222, res);
  },
  methods: {},
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
